<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>报表管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <script src="../../static/lib/layui/layui.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="weadmin-body">
    <section class="mainbody">
        <!--  <h3>马达振动记录</h3>-->
        <!--筛选条件-->
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">筛选历史记录</h2>
                <div class="layui-colla-content layui-show">
                    <div class="parameter">
                        <form action="#" class="layui-form layui-form-pane layui-clear" lay-filter="parameter">
                            <div class="layui-form-item layui-input-inline">
                                <!--区域-->
                                <div class="layui-inline  layui-form-item ">
                                    <label class="layui-form-label">区域</label>
                                    <div class="layui-input-inline area-option-wrap">
                                        <select name="areaId" lay-filter="areaMenu" class="layui-bg-blue areaMenu">
                                            <option value="0">全部</option>
                                        </select>
                                    </div>
                                </div>
                                <!--槽位-->
                                <div class="layui-inline layui-form-item">
                                    <label class="layui-form-label">槽位</label>
                                    <div class="layui-input-inline trough-option-wrap">
                                        <select name="troughId" lay-filter="troughMenu" class="layui-bg-blue troughMenu">
                                            <option value="0">全部</option>
                                        </select>
                                    </div>
                                </div>
                                <!--马达-->
                                <div class="layui-inline  layui-form-item ">
                                    <label class="layui-form-label">马达</label>
                                    <div class="layui-input-inline motor-option-wrap">
                                        <select name="moId" lay-filter="motorMenu" class="layui-bg-blue motorMenu">
                                            <option value="0">全部</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-input-inline">
                                <div class="layui-inline layui-hide">
                                    <label class="layui-form-label">开始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="startDate" name="startTime">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="endDate" name="endTime">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline layui-btn-group fr">
                                <button type="button" class="layui-btn btn-theme layui-btn-sm searchBtn" lay-submit lay-filter="search">查询</button>
                                <button type="button" class="layui-btn btn-theme layui-btn-sm exportBtn">导出</button>
                                <button type="button" class="layui-btn btn-theme layui-btn-sm printBtn">打印</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--表格-->
        <div class="tables">
            <table lay-filter="motorRecord" lay-data="{id: 'motorRecord'}" class="reportTable"></table>
        </div>
    </section>
</div>
</body>
</html>
<!--区域模板-->
<script type="text/html" id="motor-areas-tpl">
    <option value="0">全部</option>
    {{each data}}
    <option value="{{$value.areaId}}">{{$value.areaName}}</option>
    {{/each}}
</script>
<!--槽位模板-->
<script type="text/html" id="motor-trough-tpl">
    <option value="0">全部</option>
    {{each data}}
    <option value="{{$value.troughId}}">{{$value.troughName}}</option>
    {{/each}}
</script>
<!--马达模板-->
<script type="text/html" id="motors-tpl">
    <option value="0">全部</option>
    {{each data}}
    <option value="{{$value.moId}}">{{$value.moName}}</option>
    {{/each}}
</script>
<script src="../device/motor/static/js/global.js"></script>
<script>
    layui.use(['laydate', 'layer', 'form', 'table', 'configs', 'template','excel'], function () {
        var $ = layui.jquery,
            laydate = layui.laydate,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            template = layui.template,
            config = layui.configs,
            excel = layui.excel;
        var tableRender = null;
        var areaId = null;
        initAll();

        function initAll(){
            initDate();
            getArea();
        }

        //获取区域
        function getArea() {
            $.ajax({
                url: config.motorBaseUrl + "/area_info/select/v1.0",
                type: "post",
                datatype: "json",
                data: {},
                success: function (result) {
                    if (result.stateCode == 0) {
                        $(".areaMenu").html(template("motor-areas-tpl", result));
                        form.render('select');
                        //监听区域选择
                        form.on('select(areaMenu)', function(data) {
                            $(".troughMenu").html("");
                            $(".motorMenu").html("");
                            areaId = data.value;
                            getTrough(areaId);
                        });
                    } else {
                        layer.alert(result.stateMsg);
                    }
                }
            })
        }

        //按区域查槽位
        function getTrough(areaId) {
            $.ajax({
                url: config.motorBaseUrl + "/mo_trough/selectAreaTrough/v1.0",
                type: "post",
                datatype: "json",
                data: {
                    areaId: areaId
                },
                success: function (result) {
                    if (result.stateCode == 0) {
                        $(".troughMenu").html(template("motor-trough-tpl", result));
                        form.render('select');
                        //监听槽位选择
                        form.on('select(troughMenu)', function(data) {
                            $(".motorMenu").html("");
                            var troughId = data.value;
                            getMotors(troughId);
                        });
                    } else {
                        layer.alert(result.stateMsg);
                    }
                }
            })
        };

        // 按槽位查马达
        function getMotors(troughId) {
            $.ajax({
                url: config.motorBaseUrl + "/mo_motors/selectMortor/v1.0",
                type: "post",
                datatype: "json",
                data: {
                    troughId: troughId
                },
                success: function (result) {
                    if (result.stateCode == 0) {
                        $(".motorMenu").html(template("motors-tpl", result));
                        form.render('select');
                    } else {
                        layer.msg(result.stateMsg);
                    }
                }
            })
        }

        //监听所选马达
        var motorsTitle = [];
        var motorsId = [];
        form.on('checkbox(devices)', function (data) {
            var title = $(data.elem).attr("title");
            if (data.elem.checked) {
                motorsTitle.push(title);
                motorsId.push(data.value);
            } else {
                motorsTitle = motorsTitle.filter(function (item) {
                    return item != title;
                });
                motorsId = motorsId.filter(function (item) {
                    return item != data.value;
                });
            }
            var title = motorsTitle.join(",");
            $(".optval").attr("value", title);
            $(".optval").attr("motorsId", motorsId);
        });

        function initDate(){
            laydate.render({
                elem: '#startDate',
                value: new Date(new Date().getTime() - 3600*1000 ),
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime',
                max: formatDate()
            });
            laydate.render({
                elem: '#endDate',
                value: hourZero(new Date()),
                format: 'yyyy-MM-dd HH:mm:ss',
                type: 'datetime',
                max: formatDate(),
                ready: function(date){
                    $(".layui-laydate .layui-laydate-footer").on("click", "span.laydate-btns-time", function () {
                        var hourLi = $(this).parents(".layui-laydate").find('.laydate-time-show .laydate-time-list > li:nth-child(2)');
                        hourLi.nextAll().remove();
                        $(this).parents(".layui-laydate").find('.laydate-time-show .laydate-time-list > li').css("width", "50%");
                    });
                }
            });
        };

        //查询
        $(".searchBtn").click(function () {
            // $(".reportTable").append('<i class="layui-icon layui-icon-loading layui-anim-rotate layui-anim-loop"></i>');
            form.on('submit(search)', function(data){
                getTableData(data.field);
                return false;
            });
        });

        //表格数据
        function getTableData(data) {
            $.ajax({
                url: config.motorBaseUrl + "/mo_data_rec/select/v1.0",
                type: "post",
                datatype: "json",
                data: data,
                success: function (result) {
                    if (result.stateCode == 0) {
                        renderTable(result.data);
                    } else {
                        layer.msg(result.stateMsg);
                    }
                }
            })
        }

        //渲染表格
        function renderTable(data) {
            tableRender = table.render({
                elem: '.reportTable'
                , id:"motorRecord"
                , data: data
                , cols: [[
                    {field: 'areaName', title: '区域名称'}
                    ,{field: 'troughName', title: '槽位名称 '}
                    ,{field: 'moName', title: '设备位置'}
                    ,{field: 'strRecTime', title: '测量时间' ,width:170}
                    /*, {field: 'plcState', title: '启停信号'}*/
                    , {field: 'shockData', title: '振幅数据'}
                    , {field: 'upperLimit', title: '振幅上限', templet:'<div>{{ d.upperLimit == -1? "未启用" : d.upperLimit}}</div>'}
                    , {field: 'lowerLimit', title: '振幅下限', templet:'<div>{{ d.lowerLimit == -1? "未启用" : d.lowerLimit}}</div>'}
                    , {field: 'upperLimitInner', title: '预警上限', templet:'<div>{{ d.upperLimitInner == -1? "未启用" : d.upperLimitInner}}</div>'}
                    , {field: 'lowerLimitInner', title: '预警下限', templet:'<div>{{ d.lowerLimitInner == -1? "未启用" : d.lowerLimitInner}}</div>'}
                ]]
                // ,overflow: {
                //   type: 'tips'
                //   ,color: 'black' // 字体颜色
                //   ,bgColor: 'white' // 背景色
                // }
                , page: {
                    layout: ['prev', 'page', 'next', 'count', 'skip', 'limit'] //自定义分页布局
                    , groups: 5 //只显示 5 个连续页码
                    , first: "首页"
                    , last: "尾页"
                    , limits: [100, 200, 300, 400, 500]
                }
                , limit: 100
                , loading: true
                , done: function (res) {
                    //soulTable.render(this);
                }
            });
        }

        //导出
        $(".exportBtn").on("click",function () {
            excel.exportTable2Excel(tableRender, "马达振动记录");
            // var st = new Date();
            // console.log("st="+st);
            // soulTable.export(tableRender, {
            //   filename: '马达振动记录.xlsx', // 文件名
            // });
            // var et = new Date();
            // console.log("et="+et);
            // console.log(et - st);
        });
        //年月日时 分秒为00 2019-09-24 08:00:00
        function hourZero(date) {
            var date = date || new Date();
            var Y = date.getFullYear();
            var M = date.getMonth() + 1;
            M = M < 10 ? '0' + M : M;
            var D = date.getDate();
            D = D < 10 ? '0' + D : D;
            var h = date.getHours();
            h = h < 10 ? '0' + h : h;
            var m = date.getMinutes();
            m = m < 10 ? '0' + m : m;
            return Y + '-' + M + '-' + D + ' ' + h+':'+m+':00';
        }
    });
</script>
